<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录界面</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <link type="text/css" rel="stylesheet" href="/css/moregood.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
    <script type="text/javascript" src="/js/jquery-3.4.1.js"></script>
    <style>
        #laoliu > .el-form-item__label {
            width: 82px !important;
        }
    </style>
</head>
<body id="bg">
<div id="login">
    <div>
        <div id="loginBox">
            <el-form :model="loginForm" status-icon :rules="loginRules" ref="ruleForm" label-width="80px"
                     class="demo-ruleForm" id="loginForm">
                <span id="zt">登录</span>
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user-solid" type="text" placeholder="请输入用户名/邮箱/手机号"
                              v-model="loginForm.username" autocomplete="off"
                    ></el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-lock" type="password" placeholder="请输入密码"
                              v-model="loginForm.password"
                              autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="">
                    <el-input style="width: 132px;" prefix-icon="el-icon-postcard" type="text" placeholder="图片验证码"
                              autocomplete="off"
                              v-model="incode"
                              @blur="handleInputConfirm()"
                    >

                    </el-input>
                    <a href="javascript:fn1()"><img style="margin-top: 17px;" id="img1"
                                                    src="/code/getValidateCode"/></a>
                    <a href="" @click="getcode" style="color: #7FFF00;text-decoration: none;">看不清？换一张</a>
                </el-form-item>


                <el-form-item>
                    <el-button type="login" @click="login()" style="background-color: #9370DB;width: 302px;">登录
                    </el-button>
                    <div>
                        <a @click="forget()" style="color: #70DB93;text-decoration: none;">忘记密码</a>
                        <a href="userRegister.html"
                           style="color: #7FFF00;text-decoration: none;margin-left: 183px;">免费注册</a>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <%--登陆失败提示--%>
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
    >
        <p style="color: red">账号或密码错误</p>

        </span>
    </el-dialog>


    <!--修改的弹出层dialogVisible:控制对话框的显示和隐藏-->
    <el-dialog
            title="修改提示"
            :visible.sync="dialogVisible1"
            width="30%"
    >
        <!--:model:绑定表单数据-->
        <el-form label-width="80px" :model="editForm">


            <el-form-item label="新密码" prop="password">
                <el-input v-model="editForm.password"></el-input>
            </el-form-item>

            <el-form-item label="绑定邮箱">
                <el-input v-model="editForm.email"></el-input>
            </el-form-item>


            <el-form-item label="邮箱验证码" id="laoliu">
                <el-input v-model="editForm.code" style="position: relative;bottom: 40px;"></el-input>
            </el-form-item>


        </el-form>

        <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible1 = false">取 消</el-button>
                        <el-button type="primary" @click="confirmUpdate">确认修改</el-button>
                        <el-button type="primary" @click="getcode1">获取验证码</el-button>
        </span>
    </el-dialog>


</div>
</body>
<script>
    var login = new Vue({
        el: "#login",
        data: {
            //定义修改表单的数据变量
            editForm: {},

            //前端输入的码
            incode: "",

            //后端传出的码
            outcode: "",

            dialogVisible: false,
            dialogVisible1: false,

            loginForm: {},
            //登录的规则

            subForm: {},
            loginRules: {
                username: [
                    {required: true, message: '请输入用户名/邮箱/手机号', trigger: 'blur'},
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                ]
            }
        },
        created() {
            this.getcode();
        },


        methods: {

            getcode1() {
                let a = "";
                a = this.editForm.email
                console.log(a)
                axios.get("/email/send?email=" + a).then(resp => {
                })

            },

            forget() {
                this.dialogVisible1 = true;
            },
            confirmUpdate() {
                this.subForm.username = this.loginForm.username
                this.subForm.password = this.editForm.password
                console.log(this.subForm)
                if (this.editForm.code.length === 6) {
                    axios.post("/user/update", this.subForm).then(resp => {
                        this.dialogVisible1 = false;
                        this.$message.success("修改成功");

                    })
                }

            },


            //获取验证返回前端验证
            getcode() {
                axios.get("/code/outcode").then(resp => {
                    console.log(resp.data.data)
                    this.outcode = resp.data.data
                })
            },

            //对比验证码是否一致
            handleInputConfirm() {
                this.getcode();
                console.log(this.incode)
                console.log(this.outcode)
                //解决空值也能判断为验证通过的bug
                if (this.incode != "" && this.incode != null && this.incode != undefined) {

                    if (this.outcode === this.incode) {
                        this.$message.success("验证成功");
                    } else {
                        this.$message.success("验证失败");
                    }


                }


            },
            login() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        axios.post("/login/user", this.loginForm).then(resp => {
                            if (resp.data.code == 200) {
                                this.$message.success("登录成功");
                                location.href = "/userindex.html";

                            } else {
                                this.dialogVisible = true;
                            }
                        })
                    }
                })
            }
        }
    })
</script>

<script>
    function fn1() {
        //定义时间戳
        var a = new Date();
        //每次给请求 虚拟传参，避免html不刷新同一名字控件内容的bug
        document.getElementById("img1").src = "/code/getValidateCode?t=" + a.getTime();
    }
</script>
<style type="text/css">
    #loginBox {
        width: 383px;
        height: 300px;
        margin: 150px auto;

    }

    #loginForm {
        margin: 20px auto;
    }

    #inputU {
        width: 94%;
        border-radius: 10px;
        margin-left: -30px;
        margin-top: 0px;
    }

    #inputP {
        width: 94%;
        border-radius: 10px;
        margin-left: -30px;
    }

    #button {
        background-color: #31b0d5;
        width: 94%;
        border-radius: 10px;
        margin-left: -30px;
    }

    #bg {
        background-image: url("http://www.zdyfy.com/content/main/base/images/bg.jpg");
        background-size: 120% 120%;
    }

    #forget {
        color: #D1D1D1;
        margin-left: 190px;
        text-decoration: none;
    }

    #reg {
        color: #66b1ff;
        margin-left: 8px;
        text-decoration: none;
    }

    #zt {
        color: #0F0F0F;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "华文行楷", Arial, sans-serif;
        font-size: 60px;
        margin-left: 162px;
    }
</style>
</html>